<template>
  <div class="app-container">
    <tablels :pageData="pageData"  v-loading="listLoading" element-loading-text="Loading" @pageChange="pageChange">
    </tablels>
  </div>
</template>

  <script lang="ts">
import { Component,Prop, Vue } from "vue-property-decorator";
import { PfmModule } from "@/store/modules/PfmRepo";
import { ConfModule } from "@/store/modules/ConfRepo";
import Tablels from '@/layout//components/Tablels/index.vue'
@Component({
  name: "performance-details",
  components: {
    Tablels
  }
})
export default class extends Vue {
  private pageData: {
    content: Array<any>;
    totalElements: Number;
    totalPages: Number;
    fixCols: Array<any>;
    columns: Array<any>;
    size:Number;
    page:Number;
  } = {
    content: [],
    totalElements: 0,
    totalPages: 0,
    fixCols: [],
    columns: [],
    size: 10,
    page: 0
  };


  private listQuery = {
    page: 1,
    s: "",
    size: 10,
  };

  private listLoading = true;
  private async created() {
    this.loadLs();

  }
  //分页事件
  private async pageChange(pageInfo:{page:Number,size:Number}){
    console.log(<any>pageInfo);
    this.listQuery.page=<any>pageInfo.page;
    this.listQuery.size=<any>pageInfo.size;
    this.listLoading=true;

    this.loadLs();
  }
  private async loadLs() {
    var r = await PfmModule.ls(this.listQuery);

    var conf = await ConfModule.fieldInfo();

    var rp = r.data;
    console.log(rp);
    this.pageData.content = rp.content;
   
    this.pageData.totalElements = rp.totalElements;
    this.pageData.totalPages = rp.totalPages;
    this.pageData.size=rp.pageable.pageSize;
    this.pageData.page=rp.pageable.pageNumber+1;
    //处理字段信息
    var cols:Array<any>=<Array<any>>conf["绩效信息"];
    cols=cols.filter(it=>it.ls);
    var fixedLength=6;
    //固定列
    this.pageData.fixCols= cols.slice(0,fixedLength);

    this.pageData.columns = cols.slice(fixedLength,cols.length);
    this.listLoading = false;
  }
}
</script>